<template>
    <div style="background: rgb(244,244,246); padding: 10px;">
        <div class="smallFont">昨日数据</div>

        <div class="box" style="margin-top: 15px;">
            <!-- 左 -->
            <div class="box_ left" style="flex: 1; margin-right: 15px; height: 200px;">
                <div class="img" style="padding: 15px; box-sizing:border-box;">
                    <i class="el-icon-share"></i>
                </div>
                <div class="lightFont">分享次数</div>
                <div class="bigFont">0</div>
                <div class="smallFont">今日+ 0</div>
            </div>
            <!-- 右 -->
            <div style="flex: 4" class="boxRight">
                <!-- 第一排 -->
                <div class="box" style="margin-bottom: 15px">
                    <!-- 第一排左 -->
                    <div class="box_" style="margin-right: 15px">
                        <div>
                            <div class="img">PV</div>
                            <div>
                                <div class="bigFont">0</div>
                                <div class="lightFont">PV</div>
                            </div>
                        </div>
                        <div class="smallFont">今日+ 0</div>
                    </div>

                    <!-- 第一排右 -->
                    <div class="box_">
                        <div>
                            <div class="img">UV</div>
                            <div>
                                <div class="bigFont">0</div>
                                <div class="lightFont">UV</div>
                            </div>
                        </div>
                        <div class="smallFont">今日+ 0</div>
                    </div>
                </div>

                <!-- 第二排 -->
                <div class="box">
                    <!-- 第一排左 -->
                    <div class="box_"  style="margin-right: 15px">
                        <div>
                            <div class="img">
                                <i class="el-icon-paperclip"></i>
                            </div>
                            <div>
                                <div class="bigFont">0</div>
                                <div class="lightFont">新增访客</div>
                            </div>
                        </div>
                        <div class="smallFont">今日+ 0</div>
                    </div>
                    <!-- 第一排右 -->
                    <div class="box_">
                        <div>
                            <div class="img">
                                <i class="el-icon-s-custom"></i>
                            </div>
                            <div>
                                <div class="bigFont">0</div>
                                <div class="lightFont">新增客户</div>
                            </div>
                        </div>
                        <div class="smallFont">今日+ 0</div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 选项卡 -->
        <el-tabs v-model="activeName" @tab-click="tabClickHandle">
            <el-tab-pane label="常用入口" name="first">
                <div class="tabBox first">
                    <div class="kuai">
                        <div style="background: rgb(4,147,255)"></div>
                        <div>文章</div>
                    </div>
                    <div class="kuai">
                        <div style="background: rgb(152,112,255)"></div>
                        <div>海报</div>
                    </div>
                    <div class="kuai">
                        <div style="background: rgb(255,127,77)"></div>
                        <div>朋友圈</div>
                    </div>
                    <div class="kuai">
                        <div style="background: rgb(90,221,70)"></div>
                        <div>活动</div>
                    </div>
                    <div class="kuai">
                        <div style="background: rgb(255,172,39)"></div>
                        <div>小程序</div>
                    </div>
                </div>
            </el-tab-pane>

            <el-tab-pane label="员工数据" name="second">
                <div class="tabBox">
                    <empData v-if="activeName == 'second'"></empData>
                </div>
            </el-tab-pane>

            <el-tab-pane label="客户数据" name="third">
                <div class="tabBox">
                    <client v-if="activeName == 'third'"></client>
                </div>
            </el-tab-pane>

            <el-tab-pane label="员工排行" name="fourth">
                <div class="tabBox">
                    <empRank v-if="activeName == 'fourth'"></empRank>
                </div>
            </el-tab-pane>

            <el-tab-pane label="内容排行" name="fifth">
                <div class="tabBox">
                    <contentRank v-if="activeName == 'fifth'"></contentRank>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import empData from '@/views/security/content/empData'
import client from '@/views/security/content/client'
import empRank from '@/views/security/content/empRank'
import contentRank from '@/views/security/content/content'

export default {
  data() {
    return {
      activeName: 'first',
    }
  },

  // 注册组件
  components: {
    empData,
    client,
    empRank,
    contentRank
  },
  methods: {
    tabClickHandle(tab) {
      this.activeName = tab.name
    }
  }
}
</script>

<style scoped>
.smallFont {font-weight: 600; font-size: 16px;}
.bigFont {font-weight: 700; font-size: 40px;}
.lightFont {color: #aaa; font-weight: 400;}

.box {display: flex; justify-content: space-between;}
.box_ {background: #fff; padding: 15px; border-radius: 6px; box-sizing:border-box; justify-content: center; align-items: center;}
.boxRight .box_{height: 92px; flex: 1; box-sizing:border-box; display: flex; justify-content: space-between;}
.boxRight .box_ div:nth-child(1) {display: flex;justify-content: center;align-items: center;}
.boxRight .box_>div:nth-child(2) {line-height: 60px;}

.left {display: flex; flex-direction: column;}

.img {background: #1AA1FD; width: 60px; height: 60px; border-radius: 30px;}
.boxRight .img {margin-right: 15px;  color: #fff; font-size: 20px;}

.tabBox {background: #fff; height: 530px;}

.first {display: flex; flex-direction: row; padding: 30px;}
.first .kuai {margin-right: 25px;}
.first .kuai>div:nth-child(1) {margin-bottom: 10px; width: 100px; height: 100px; border-radius: 10px;}
.first .kuai>div:nth-child(2) {text-align: center;}

i {color: #fff; font-size: 30px;}
</style>
